<template>
    <div class="container">
    <div class="item1">语文</div>
    <div class="item2">数学</div>
    <div class="item3">英语</div>
      <div class="item4">科学</div>
    </div>
</template>
<script>
export default{
    data(){
        return{};
    },
};
</script>
    <style scoped>
           .container{
               position: fixed;
            display:flex;
            background: #001528;
            height: 60px;
            left: 40%;
            margin: left -50px; ;
            flex-direction: row;
            justify-content: center;
            margin-bottom: 10px;
    
        }
         .item1,
          .item2,
          .item3,
           .item4{
         width: 100px;
         height: 60px;
         line-height: 60px;
         color: #fff;
         text-align: center;
         cursor:pointer;
         }
         .item2{
             background: #1890ff;
         }
         .item1:hover,
         .item2:hover,
         .item3:hover,
         .item4:hover{
             background: #334453;
         }
    </style>